<template>
  <el-row gutter="5" style="padding: 20px">
    <template v-for="(item, index) in testItems" :key="index">
      <el-col :span="2" style="margin-top: 5px">
        <GLdataItem
          :indexText="`器件` + (index + 1)"
          currentLabel="当前电流"
          :boardid="props.boardid"
          :componentid="item.boardid"
          :currentValue="item.dl"
          :status="item.status"
          :datasourceindex="props.datasourceindex"
          :testInfo="props.testInfo"
          :type="props.type"
          :deviceid="props.deviceid"
        /> </el-col
    ></template>
  </el-row>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

import GLdataItem from "./gldataitem.vue";
import TestLog from "../testcenter/testlog.vue";
import { getComponentBoardLatestData } from "@/api/device/dpcomponentBoardStatus";
const props = defineProps({
  boardid: {
    type: String,
    default: "1",
  },
  testid: {
    type: String,
    default: "",
  },
  enableboardstatus: {
    type: String,
    default: "",
  },
  datasourceindex: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "ic",
  },
  deviceid: {
    type: String,
    default: "",
  },

  testInfo: {
    type: Object,
    default: () => {},
  },
});

const testItems = ref([]);

// 封装获取数据的函数
const fetchData = () => {
  if (props.boardid && props.testid) {
    getComponentBoardLatestData({
      boardid: props.boardid,
      testid: props.testid,
      datasourceindex: props.datasourceindex,
    }).then((res) => {
      testItems.value = res;
    });
  }
};
const fetchInterval = ref(null);

// 设置定时任务
const setFetchInterval = () => {
  // 5 秒执行一次，单位为毫秒
  fetchInterval.value = setInterval(fetchData, 5000);
};

// 清除定时任务
const clearFetchInterval = () => {
  if (fetchInterval.value) {
    clearInterval(fetchInterval.value);
  }
};
// 组件挂载时调用获取数据函数
onMounted(() => {
  fetchData();
  clearFetchInterval();
  setFetchInterval();
});
onUnmounted(() => {
  clearFetchInterval();
});
// 监听 props.boardid 和 props.testid 的变化
// watch(
//   [() => props.boardid, () => props.testid],
//   ([newBoardId, newTestId]) => {
//     fetchData();
//   },
//   { deep: true }
// );
</script>
